<template>
    <div id="credit"></div>
    <div id="cesiumContainer"></div>
</template>
<script lang="ts" setup>
import * as Cesium from 'cesium';
import { ACCESS_TOKEN, FLY_MODEL } from '../../utils/constant';
Cesium.Ion.defaultAccessToken = ACCESS_TOKEN;
/**
 * Viewer查看器
 */
const initMap = () => {
    const viewer = new Cesium.Viewer('cesiumContainer', {
        // 是否显示信息窗口
        infoBox: false,
        // 是否显示查询框
        geocoder: false,
        // 是否显示home按钮
        homeButton: false,
        // 切换3D和2D的按钮
        sceneModePicker: false,
        // 切换图层按钮
        baseLayerPicker: false,
        // 更多帮助按钮
        navigationHelpButton: false,
        // 动画表盘
        animation: false,
        creditContainer: 'credit',
        timeline: false,
        fullscreenButton: false,
        vrButton: false
    });
    // 设置显示fps
    viewer.scene.debugShowFramesPerSecond = false;
    viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(113.3191, 23.109, 750),
    label: {
      text: "广州塔",
      font: "24px sans-serif",
      fillColor: Cesium.Color.WHITE,
      outlineColor: Cesium.Color.BLACK,
      outlineWidth: 4,
      // FILL填充文字，OUTLINE勾勒标签，FILL_AND_OUTLINE填充文字和勾勒标签
      style: Cesium.LabelStyle.FILL_AND_OUTLINE,
      // 设置文字的偏移量
      pixelOffset: new Cesium.Cartesian2(0, -24),
      // 设置文字的显示位置,LEFT /RIGHT /CENTER
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
      // 设置文字的显示位置
      verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
    },
    billboard: {
      image: FLY_MODEL,
      width: 50,
      height: 50,
      // 设置广告牌的显示位置
      verticalOrigin: Cesium.VerticalOrigin.TOP,
      // 设置广告牌的显示位置
      horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
    },
  });
};
onMounted(() => {
    initMap();
});
</script>
<style lang="scss" scoped></style>
